<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%@ include file="style.jsp" %>
    <link rel="stylesheet" type="text/css" href="./css/cascader.css"/>
    <script src="./js/cascader.js"></script>
    <script src="./js/options.js"></script>
    <link rel="stylesheet" href="css/cart.css">
    <script src="./js/jquery-1.12.4.js"></script>
</head>

<body>

<%@ include file="start.jsp" %>
<!--  导航 end -->
<%@ include file="header.jsp" %>
<!--  header end -->
<div class="submena clearfix">
        <span class="layui-breadcrumb" lay-separator=">">
            <a href="${pageContext.request.contextPath}/shop/client">首页</a>
            <a><cite>订单支付</cite></a>
        </span>
</div>
<div class="w grid" style="margin-bottom: 50px;">
    <!-- 商品购物车容器 -->
    <div class="car-wrap">
        <!-- 商品模块盒子标题 -->
        <div class="car-title" style="padding: 19px 100px;">
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
        </div>
            <!-- 商品模块盒子列表 -->
            <div class="car-item-list">
                <c:forEach items="${orderItem}" var="item" varStatus="vs">
                    <div class="card-item" style="padding: 10px 20px;">
                        <div class="p-goods" style="display: flex;flex-direction: column;">
                            <div class="p-des">
                                    ${item.name}
                            </div>
                            <div class="p-img" style="border: 0;padding: 0">
                                <img src=".${item.imgurl}" alt="">
                            </div>
                        </div>
                        <div class="p-price">￥${item.price}</div>
                        <div class="p-num">
                            <input type="text" value="${item.buynum}" class="txt" readonly>
                        </div>
                        <div class="p-sum">￥${item.price}</div>
                    </div>
                </c:forEach>
            </div>
            <div class="car-floatBar" style="margin-bottom:0;height:auto;">
                <form class="layui-form" action="${pageContext.request.contextPath}/shop/client/paySuccess" method="post">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="order_id" readonly="readonly" value="${orderItem[0].order_id}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">收货人</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="receiverName" readonly="readonly" value="${orderItem[0].receiverName}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >收货地址</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="receiverAddress" readonly="readonly" value="${orderItem[0].receiverAddress}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="receiverPhone" readonly="readonly" value="${orderItem[0].receiverPhone}">
                            </div>
                        </div>
                        <div class="layui-inline" style="float: right">
                            <div class="layui-input-inline">
                                <button class="btn-area" type="button" onclick="pay()" >立即付款</button>
                                <input type="submit" style="display: none" id="submit">
                                <script>
                                    function pay(){
                                        let result = layer.confirm('请确认是否付款该订单？', {
                                                btn: ['确认','取消'] //按钮
                                            }, function(){
                                                $("#submit").trigger("click");
                                            }
                                            ,function (){
                                                console.log("点击了取消")
                                            })
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="car-floatBar">
                <div class="toolbar-right">
                    <div class="amount-sum">已经选<em>0</em>件商品</div>
                    <div class="price-sum">总价： <em>¥0.00</em></div>
                </div>
            </div>
    </div>
</div>
<%@include file="footer.jsp" %>

<script>
    $(function () {
        getSum();
    });

    // 计算总件数和总金额
    function getSum() {
        // 获取所有选中的商品数量的输入框
        var total = 0;
        var items = $('.card-item');
        items.find('.txt').each(function (index, el) {
            total += parseInt($(el).val());
        });
        $('.amount-sum em').text(total);
        // 获取总金额
        var money = 0;
        items.find('.p-sum').each(function (index, el) {
            money += parseFloat($(el).text().substr(1));
        });
        $('.price-sum em').text('￥' + money);
    }
</script>
</body>

</html>